<template>
  <public-footer>
    <div class="my-box">
      <div class="header">
        <!-- 扫一扫 -->
        <div class="fl">
          <van-icon name="scan" color="#565656" size="1.2rem" />
        </div>
        <div class="ct">个人中心</div>
        <div class="fr">
          <!-- 设置 -->
          <router-link to="/">
            <van-icon name="setting-o" />
          </router-link>
          <!-- 信息提示 -->
          <router-link to="/">
            <van-icon name="chat-o" dot />
          </router-link>
        </div>
      </div>

      <!-- 用户信息 -->
      <section class="header-main">
        <div class="user-info">
          <div class="user-photo">
            <van-image
              round
              width="4rem"
              height="4rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
          </div>
          <div class="user-title">
            <h4>{{ userInfo.name }}</h4>
            <p>{{ userInfo.id }}</p>
          </div>
          <div class="fr">
            <span @click="login"> 退出登录 ></span>
          </div>
        </div>
      </section>

      <article>
        <div class="wallet">
          <div class="item">
            <h4>12</h4>
            <p>优惠券</p>
          </div>
          <div class="item">
            <h4>688</h4>
            <p>金币</p>
          </div>
          <div class="item">
            <h4>72</h4>
            <p>礼品卡余额</p>
          </div>
          <span>&nbsp;专享</span>
        </div>

        <div class="banner">
          <h4>超级会员</h4>
        </div>

        <!-- 我的订单 -->
        <div class="myOrder">
          <van-cell title="我的订单" is-link value="全部订单" />
          <van-grid :border="false">
            <van-grid-item icon="card" text="待付款" />
            <van-grid-item icon="chat-o" badge="9" text="备货中" />
            <van-grid-item icon="shop-collect" text="待自提" color="#1989fa" />
            <van-grid-item icon="service" text="待评价" />
          </van-grid>
        </div>
        <!-- 订单 >>>>>>>>>>>>>>>> end -->

        <div class="myService">
          <van-cell title="我的服务" />
          <van-grid>
            <van-grid-item icon="card" text="充值专享" />
            <van-grid-item icon="chat-o" badge="9" text="邀请有礼" />
            <van-grid-item
              icon="shop-collect"
              text="签到领券"
              color="#1989fa"
            />
            <van-grid-item icon="service" text="礼品卡包" />
            <van-grid-item icon="card" text="收货地址" is-link to="me/adress" />
            <van-grid-item icon="chat-o" badge="9" text="同城门店" />
            <van-grid-item
              icon="shop-collect"
              text="电子发票"
              color="#1989fa"
            />
            <van-grid-item icon="service" text="常见问题" />
            <van-grid-item icon="service" text="联系我们" />
            <van-grid-item icon="service" text="分享好友" />
          </van-grid>
        </div>

        <!-- 内容 >>>>>>>>>>>>>>>> 结束 -->
      </article>
    </div>
  </public-footer>
</template>
<script>
import { user } from "../../apis/me";

export default {
  components: {},
  props: {},
  data() {
    return {
      userInfo: {}, // 用户信息
    };
  },
  created() {
    let id = this.$store.getters["aishang/getToken"];

    let s = user(id.id);
    s.then((data) => {
      this.userInfo = data.data;
    });
  },
  methods: {
    login() {
      localStorage.removeItem("autoToken");
      this.$store.commit("aishang/token", "");

      this.$router.push({ path: "/login", query: { s: true } });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../style/common.less";

.my-box {
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
  // 头部工具
  .header {
    overflow: hidden;
    background-color: orange;
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 20fr 60% 20fr;
    gap: 0px 0px;
    height: 40px;
    line-height: 40px;

    .ct {
      text-align: center;
    }
    .fl {
      margin-left: 0.5em;
    }
    .fr {
      display: grid;
      grid-auto-columns: 1fr;
      grid-template-columns: 1fr 1fr;
      gap: 0.1em 0px;
    }
  }

  //用户信息
  .header-main {
    overflow: hidden;
    height: 110px;
    // background-color: rgb(157, 157, 238);
    .user-info {
      width: 100%;
      display: flex;
      background-color: rgb(255, 255, 255);
      padding: 0.3rem 0.2rem;
      align-items: center;
      justify-content: space-between;
      float: left;
      .user-photo {
        margin: 0.2rem 0.6rem;
      }
      .user-title {
        flex: 1;
        font-family: "Courier New", Courier, monospace;
        > h4 {
          color: rgb(53, 45, 45);
          font-weight: normal;
          display: inline;
        }
        > p {
          font-size: 0.24rem;
          color: rgb(46, 37, 37);
        }
      }
      .fr {
        span {
          margin-right: 1rem;
          font-size: 0.8rem;
          color: red;
        }
        float: right;
        background: rgb(255, 255, 255);
      }
    }
  }

  article {
    height: 100%-15px;
    overflow-x: hidden;
    //banner

    // 钱包
    .wallet {
      width: 100%;
      height: 100px;
      background-color: rgb(254, 255, 255);
      margin: 0 auto;
      display: grid;
      grid-auto-columns: 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0em 0px;
      position: relative;
      > .item {
        text-align: center;
        > h4 {
          font-family: "Segoe UI";
          display: block;
          text-align: center;
          font-size: 24px;
          margin-top: 1.6rem;
        }
        > p {
          color: #565656;
          font-size: 14px;
          line-height: 6px;
          text-align: center;
        }
      }
      > span {
        width: 30px;
        display: block;
        background-color: rgb(255, 0, 0);
        color: #fff;
        font-size: 12px;
        position: absolute;
        left: 76px;
        top: 20px;
      }
    }

    .banner {
      width: 95%;
      height: 50px;
      background-image: linear-gradient(
        to right,
        #232526 0%,
        #414345 51%,
        #232526 100%
      );
      margin: 6px auto;
      border-radius: 10px;
      padding-left: 20px;
      > h4 {
        display: inline;
        color: #d1913c;
        font-family: "Lucida Sans";
      }
    }
  }
  //我的订单
  .myOrder {
    width: 98%;
    // height: 40px;
    background-color: rgb(144, 181, 216);
    margin: 0 auto;
    border-radius: 10px;
  }

  //我的服务
  .myService {
    width: 98%;
    // height: 40px;
    background-color: rgb(144, 181, 216);
    margin: 15px auto;
    border-radius: 10px;
  }
}
</style>